<template>
    <div>
        <el-container>
            <el-header>
                <div>
                    后台管理系统
                </div>
                <div>
                    欢迎管理员--
                    {{ store.getters.getUserInfo.username }}
                    <el-button @click="logout" type="danger" size="small">
                        退出登录
                    </el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <!-- 导航菜单 -->
                    <v-nav></v-nav>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import vNav from '../components/vNav.vue'
// 路由跳转
import {useRouter} from 'vue-router'
// 仓库
import { useStore } from 'vuex'
let store = useStore()
let router = useRouter()
let logout = ()=>{
    // 退出登录时  移除登录时存储的信息，跳转登陆页面
    store.commit('USER_LOGIN',false)
    router.push('/login')
}

</script>

<style scoped>
.el-header {
    background-color: pink;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
